<!DOCTYPE html>
<!-- Testing online code editing. -->
<html>
<head>
	<title>AddressBook</title>

	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
	<link rel="stylesheet" type="text/css" href="../library/css/geekcafe_mobile_0.1.css">

	<script type="text/javascript" src="../library/js/handlebars.js"></script>
	<script type="text/javascript" src="../library/js/handlebars_helpers.js"></script>
	<script type="text/javascript" src="../library/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

	<script type="text/javascript" src="../library/js/underscore.js"></script>
	<script type="text/javascript" src="../library/js/backbone.js"></script>
		<script type="text/javascript" src="../library/js/json2.js"></script>
	<script type="text/javascript" src="../library/js/form2js.js"></script>
	<script type="text/javascript" src="../library/js/jquery.toObject.js"></script>

	<script type="text/javascript" src="js/BusinessPartner.js"></script>

	<script type="text/x-handlebars-template" id="landing-page-template">
			<label data-mini="true">Username/Email</label>
			<input type="text" name="username" id="username" data-mini="true"></input>
			<label data-mini="true" id="labelpassword">Password</label>
			<input type="password" name="password" id="password" data-mini="true"></input>
			<input type="submit" value="Login"></input>
		</script>

	<script type="text/x-handlebars-template" id="businesspartner-list-item-template">
				<li><a href="#businesspartner-details" identifier={{id}} data-transition="slide"> 
				{{firstName}} {{lastName}} 
					{{#if organization}}
					(
						{{organization}}
					)
					{{/if}}
				</a></li>
		</script>

	<script type="text/x-handlebars-template" id="businesspartner-details-template">
			<div id="namesDiv">
			<label class="geekcafe_label_text">First Name</label>
			<input type="text" name="firstName" id="firstName" data-mini="true" placeholder="First Name" disabled="disabled" value={{firstName}} >
			<label class="geekcafe_label_text">Last Name</label>
			<input type="text" name="lastName" id="lastName" data-mini="true" placeholder="Last Name" disabled="disabled" value={{lastName}}>
			<label class="geekcafe_label_text">Organization</label>
			<input type="text" name="organization" id="organization" data-mini="true" disabled="disabled" value={{organization}}></input>

			<label class="geekcafe_label_text">Mobile No (Business)</label>
			<input type="text" name="mobileNo" id="mobileNo" data-mini="true" disabled="disabled" value={{office/mobileNo}}></input>

			<label class="geekcafe_label_text">Email (Business)</label>
			<input type="email" name="officeemail" id="officeemail" placeholder="Email" data-mini="true" disabled="disabled" value={{office/email}}></input>
		</div>

		<div data-role="collapsible" data-collapsed="true" data-mini="true">
			<h3 data-mini="true">More Details</h3>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Names</h3>
				<label class="geekcafe_label_text">Prefix</label>
				<input type="text" name="prefix" id="prefix" data-mini="true" placeholder="Prefix" disabled="disabled" value={{prefix}}>
				<label class="geekcafe_label_text">Middle Name</label>
				<input type="text" name="middleName" id="middleName" data-mini="true" placeholder="Middle Name" disabled="disabled" value={{middleName}}></div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Phones</h3>
					<label class="geekcafe_label_text">Landline (Business)</label>
					<input type="text" name="office_landlineNo" id="office_landlineNo" data-mini="true" disabled="disabled" value={{office/landlineNo}}></input>
					<label class="geekcafe_label_text">Landline (Other)</label>
					<input type="text" name="landlineNo" id="landlineNo" data-mini="true" disabled="disabled" value={{home/landlineNo}}></input>
					<label class="geekcafe_label_text">Mobile (Other)</label>
					<input type="text" name="home_mobileNo" id="home_mobileNo" data-mini="true" disabled="disabled" value={{home/mobileNo}}></input>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Emails</h3>
					<!-- <label class="geekcafe_label_text">Other Email</label> -->
					<input type="email" name="homeemail" id="homeemail" placeholder="Email" data-mini="true" disabled="disabled" value={{home/email}}></input>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Addresses</h3>
					<div data-role="collapsible" data-collapsed="true" data-mini="true">
						<h3>Business</h3>
						<label class="geekcafe_label_text">PO Box</label>
						<input type="text" name="office_poBox" id="office_poBox" data-mini="true" disabled="disabled" value={{office/poBox}}></input>
						<label class="geekcafe_label_text">Street</label>
						<input type="text" name="office_street" id="office_street" data-mini="true" disabled="disabled" value={{office/street}}></input>
						<label class="geekcafe_label_text">Locality</label>
						<input type="text" name="office_locality" id="office_locality" data-mini="true" disabled="disabled" value={{office/locality}}></input>
						<label class="geekcafe_label_text">City</label>
						<input type="text" name="office_city" id="office_city" data-mini="true" disabled="disabled" value={{office/city}}></input>
						<label class="geekcafe_label_text">State</label>
						<input type="text" name="office_state" id="office_state" data-mini="true" disabled="disabled" value={{office/state}}></input>
						<label class="geekcafe_label_text">Pincode</label>
						<input type="text" name="office_pincode" id="office_pincode" data-mini="true" disabled="disabled" value={{office/pincode}}></input>
						<label class="geekcafe_label_text">Country</label>
						<input type="text" name="office_country" id="office_country" data-mini="true" disabled="disabled" value={{office/country}}></input>
					</div>
					<div data-role="collapsible" data-collapsed="true" data-mini="true">
						<h3>Other</h3>
						<label class="geekcafe_label_text">PO Box</label>
						<input type="text" name="home_poBox" id="home_poBox" data-mini="true" disabled="disabled" value={{home/poBox}}></input>
						<label class="geekcafe_label_text">Street</label>
						<input type="text" name="home_street" id="home_street" data-mini="true" disabled="disabled" value={{home/street}}></input>
						<label class="geekcafe_label_text">Locality</label>
						<input type="text" name="home_locality" id="home_locality" data-mini="true" disabled="disabled" value={{home/locality}}></input>
						<label class="geekcafe_label_text">City</label>
						<input type="text" name="home_city" id="home_city" data-mini="true" disabled="disabled" value={{home/city}}></input>
						<label class="geekcafe_label_text">State</label>
						<input type="text" name="home_state" id="home_state" data-mini="true" disabled="disabled" value={{home/state}}></input>
						<label class="geekcafe_label_text">Pincode</label>
						<input type="text" name="home_pincode" id="home_pincode" data-mini="true" disabled="disabled" value={{home/pincode}}></input>
						<label class="geekcafe_label_text">Country</label>
						<input type="text" name="home_country" id="home_country" data-mini="true" disabled="disabled" value={{home/country}}></input>
					</div>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Miscellaneous Details</h3>
					<label class="geekcafe_label_text">Website</label>
					<input type="url" id="website" name="website" data-mini="true" disabled="disabled" value={{website}}></input>


					<label class="geekcafe_label_text">Date of Birth</label>
					<input type="date" id="dob" name="dob" data-mini="true" disabled="disabled" value={{dob}} />

					<label class="geekcafe_label_text">Anniversary Date</label>
					<input type="date" id="anniversary" name="anniversary" data-mini="true" disabled="disabled" value={{anniversary}}></input>

					<label class="geekcafe_label_text">Notes</label>
					<textarea name="notes" id="notes" disabled="disabled"></textarea>
 			</div>


		</div>


		</script>

	<!-- Template for Adding and Deleting -->
	<script type="text/x-handlebars-template" id="businesspartner-form-template">
		<div id="namesDiv">
			<label class="geekcafe_label_text">First Name</label>
			<input type="text" name="firstName" id="firstName" data-mini="true" placeholder="First Name" value={{firstName}} >
			<label class="geekcafe_label_text">Last Name</label>
			<input type="text" name="lastName" id="lastName" data-mini="true" placeholder="Last Name" value={{lastName}}>
			<label class="geekcafe_label_text">Organization</label>
			<input type="text" name="organization" id="organization" data-mini="true" value={{organization}}></input>

			<label class="geekcafe_label_text">Mobile No (Business)</label>
			<input type="text" name="office.mobileNo" id="mobileNo" pattern="[0-9]*" data-mini="true" value={{office/mobileNo}}></input>

			<label class="geekcafe_label_text">Email (Business)</label>
			<input type="email" name="office.email" id="officeemail" placeholder="Email" data-mini="true" value={{office/email}}></input>
		</div>

		<div data-role="collapsible" data-collapsed="true" data-mini="true">
			<h3 data-mini="true">More Details</h3>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Names</h3>
				<label class="geekcafe_label_text">Prefix</label>
				<input type="text" name="prefix" id="prefix" data-mini="true" placeholder="Prefix" value={{prefix}}>
				<label class="geekcafe_label_text">Middle Name</label>
				<input type="text" name="middleName" id="middleName" data-mini="true" placeholder="Middle Name" value={{middleName}}></div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Phones</h3>
					<label class="geekcafe_label_text">Landline (Business)</label>
					<input type="number" pattern="[0-9]*" name="office.landlineNo" id="office_landlineNo" data-mini="true" value={{office/landlineNo}}></input>
					<label class="geekcafe_label_text">Landline (Other)</label>
					<input type="number" pattern="[0-9]*" name="home.landlineNo" id="landlineNo" data-mini="true" value={{home/landlineNo}}></input>
					<label class="geekcafe_label_text">Mobile (Other)</label>
					<input type="number" pattern="[0-9]*" name="home.mobileNo" id="home_mobileNo" data-mini="true" value={{home/mobileNo}}></input>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Emails</h3>
					<label class="geekcafe_label_text">Other Email</label>
					<input type="email" name="home.email" id="homeemail" placeholder="Email" data-mini="true" value={{home/email}}></input>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Addresses</h3>
					<div data-role="collapsible" data-collapsed="true" data-mini="true">
						<h3>Business</h3>
						<label class="geekcafe_label_text">PO Box</label>
						<input type="text" name="office.poBox" id="office_poBox" data-mini="true" value={{office/poBox}}></input>
						<label class="geekcafe_label_text">Street</label>
						<input type="text" name="office.street" id="office_street" data-mini="true" value={{office/street}}></input>
						<label class="geekcafe_label_text">Locality</label>
						<input type="text" name="office.locality" id="office_locality" data-mini="true" value={{office/locality}}></input>
						<label class="geekcafe_label_text">City</label>
						<input type="text" name="office.city" id="office_city" data-mini="true" value={{office/city}}></input>
						<label class="geekcafe_label_text">State</label>
						<input type="text" name="office.state" id="office_state" data-mini="true" value={{office/state}}></input>
						<label class="geekcafe_label_text">Pincode</label>
						<input type="text" name="office.pincode" id="office_pincode" data-mini="true" value={{office/pincode}}></input>
						<label class="geekcafe_label_text">Country</label>
						<input type="text" name="office.country" id="office_country" data-mini="true" value={{office/country}}></input>
					</div>
					<div data-role="collapsible" data-collapsed="true" data-mini="true">
						<h3>Other</h3>
						<label class="geekcafe_label_text">PO Box</label>
						<input type="text" name="home.poBox" id="home_poBox" data-mini="true" value={{home/poBox}}></input>
						<label class="geekcafe_label_text">Street</label>
						<input type="text" name="home.street" id="home_street" data-mini="true" value={{home/street}}></input>
						<label class="geekcafe_label_text">Locality</label>
						<input type="text" name="home.locality" id="home_locality" data-mini="true" value={{home/locality}}></input>
						<label class="geekcafe_label_text">City</label>
						<input type="text" name="home.city" id="home_city" data-mini="true" value={{home/city}}></input>
						<label class="geekcafe_label_text">State</label>
						<input type="text" name="home.state" id="home_state" data-mini="true" value={{home/state}}></input>
						<label class="geekcafe_label_text">Pincode</label>
						<input type="text" name="home.pincode" id="home_pincode" data-mini="true" value={{home/pincode}}></input>
						<label class="geekcafe_label_text">Country</label>
						<input type="text" name="home.country" id="home_country" data-mini="true" value={{home/country}}></input>
					</div>
			</div>
			<div data-role="collapsible" data-collapsed="true" data-mini="true">
				<h3>Miscellaneous Details</h3>
					<label class="geekcafe_label_text">Website</label>
					<input type="url" id="website" name="website" data-mini="true" value={{website}}></input>

					<label class="geekcafe_label_text">Date of Birth</label>
					<input type="date" id="dob" name="dob" data-mini="true" value={{dob}} />

					<label class="geekcafe_label_text">Anniversary Date</label>
					<input type="date" id="anniversary" name="anniversary" data-mini="true" value={{anniversary}}></input>

					<label class="geekcafe_label_text">Notes</label>
					<textarea name="notes" id="notes"></textarea>



 			</div>


		</div>

		
		</script>

	<meta name="viewport" content="width=device-width,initial-scale=1"></head>

<body >
	<div data-role="page" id="BusinessPartner" data-theme="c">
		<div data-role="header">
			<h1>My Connexions</h1>
			<a href="#businesspartner-form" data-role="button" data-icon="add" id="add-button" class="ui-btn-right" data-transition="slidedown">Add</a>
			<a href="#LandingPage" data-role="button" id="SignIn/SignUp" class="ui-btn-left" data-transition="slidedown">SignIn/SignUp</a>
		</div>
		<div data-role="content"></div>
	</div>

	<div data-role="page" id="businesspartner-details" data-add-back-btn="true" data-theme="c">
		<div data-role="header">
			<a href="#businesspartner-form" data-role="button" data-icon="arrow-d" id="edit-button" class="ui-btn-right" data-transition="slideup">Edit</a>
			<h1>Business Partner Details</h1>

		</div>

		<div data-role="content" id="businesspartner-details-content"></div>
		<div data-role="footer">
			<div data-role="navbar" data-position="fixed">
				<ul>
					<li>
						<a href="#" data-mini="true">Call</a>
					</li>
					<li>
						<a href="#" data-mini="true">SMS</a>
					</li>
					<li>
						<a href="#" data-mini="true">Email</a>
					</li>
					<li>
						<a href="#morelist" data-rel="popup">...</a>
					</li>
				</ul>
			</div>
			<div data-role="popup" id="morelist" data-position-to="origin" data-transition="slideup" data-theme="a">
				<ul data-role="listview" data-inset="true">
					<li>
						<a href="#" data-mini="true">Add this location to contact</a>
					</li>
					<li>
						<a href="#" data-mini="true">Show Directions to location of contact</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div data-role="page" id="businesspartner-form" data-add-back-btn="true" data-theme="d">
		<div data-role="header">
			<a href="#" data-role="button" data-icon="check" data-theme="b" data-rel="back" id="save-button" class="ui-btn-right">Save</a>
			<h1>New Connexion</h1>
		</div>

		<div data-role="content" id="businesspartner-form-content">
			<form id="businesspartner-form-form" action="#"></form>
		</div>

	</div>
</body>
</html>